<template>
<div class="app">
  <div class="aa">
    <div class="a">
        <h4>用户登录</h4>
        <el-form status-icon   label-width="50px" class="demo-ruleForm">
          <el-form-item >
            <el-input class="username" type="text" v-model=" params.username" autocomplete="off" style="width:260px" placeholder="请输入用户名" ></el-input>
          </el-form-item>
          <el-form-item >
            <el-input class="password" type="password"  v-model="params.password" autocomplete="off" style="width:260px" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary button" @click="login" style="width:260px">登录</el-button>
          </el-form-item>
        </el-form>
       <div >
        &nbsp;&nbsp;<span style="color: #A9A9AB">忘记密码？</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #000099;">立即注册 ></span>
        </div>
      </div>
    </div>
   </div>
</template>
<script>
  export default {
    data() {
      return {
        params:{
          username:"",
          password:"",
        },
        errorMsg:'',
      };
    },
    methods: {
       login(){
             this.$api._api_login(this.params ).then(
              data=>{
                 console.log(data);
              if(data.code===200){
                 window.localStorage.setItem("token",data.data.token);
                this.$router.push("/college");
                this.$store.dispatch("login",data.data);
              }else{
                 this.errorMsg=data.msg;
              }
            });
        //     if (!this.username || !this.password) {
        //   this.dialog = true;
        //   return false;
        // }
        // console.log(this.username + " ... " + this.password);
        // this.$router.push("/college");

        }
    }
  }
</script>
<style>
h4{
  margin-left: 48px;
  
}
.aa{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 500px;
  width: 100%;
  background: url("../assets/login1.jpg");
}
.a{
  width: 350px;
  height:300px;
  background-color:#FFFFFF;
  opacity: 0.98;
  display: block;
  position: fixed;
    _position: absolute;
    top: 60%;
    left: 70%;
    margin-left: -400px;
    margin-top: -200px;
    z-index: 10001;
    box-shadow: 2px 2px 4px #DFDBE7;
    padding-top:30px;
    padding-right:50px;
}
.username{
  width: 130px;
  background: #FFFFFF url("../assets/user.jpg");
  

}
.password{
  width: 130px;
  background: #FFFFFF url("../assets/user.jpg");
}
</style>